<template>
    <a-modal v-model:visible="visible" :title="modalData.title" @cancel="handleCancel" :footer="null" :width="1200"
        class="vehicle-detail-modal">
        <div class="detail-layout">
            <!-- 左侧信息区域 -->
            <div class="detail-content">
                <!-- 基础信息 -->
                <div class="detail-section">
                    <div class="section-title">基础信息</div>
                    <div style=" display: grid; grid-template-columns: 2fr 1fr;">
                        <div class="info-grid" style=" display: grid; grid-template-columns: 1fr 1fr;">
                            <div class="info-item">
                                <span class="label">车辆牌照:</span>
                                <span class="value">{{ vehicleData.plateLicense || 'CS-0115试' }}</span>
                            </div>
                            <div class="info-item">
                                <span class="label">车架号:</span>
                                <span class="value">{{ vehicleData.plateVin || 'LAAAGGAC4R1000961' }}</span>
                            </div>
                            <div class="info-item">
                                <span class="label">车辆编号:</span>
                                <span class="value">{{ vehicleData.vehicleCode || '1234567890' }}</span>
                            </div>
                            <div class="info-item">
                                <span class="label">车企:</span>
                                <span class="value">{{ vehicleData.manufacturerName || '广州文远知行科技有限公司' }}</span>
                            </div>
                            <div class="info-item">
                                <span class="label">车型:</span>
                                <span class="value">{{ vehicleData.vehicleTypeName || 'HT5010XDDB' }}</span>
                            </div>
                            <div class="info-item">
                                <span class="label">运营企业:</span>
                                <span class="value">{{ vehicleData.operatorName || '中通' }}</span>
                            </div>

                            <div class="info-item">
                                <span class="label">紧急联系人:</span>
                                <span class="value">{{ vehicleData.linkman || '林锐' }}</span>
                            </div>
                            <div class="info-item">
                                <span class="label">联系电话:</span>
                                <span class="value">{{ vehicleData.linkTel || '13889159145' }}</span>
                            </div>



                        </div>
                        <div class="info-item">
                            <span class="label">车辆图片:</span>

                        </div>
                    </div>
                </div>

                <!-- 接入信息 -->
                <div class="detail-section">
                    <div class="section-title">接入信息</div>
                    <div class="info-grid">
                        <div class="info-item">
                            <span class="label">接入状态:</span>
                            <span class="value">{{ vehicleData.optStatus || '已接入' }}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">运营生效时间:</span>
                            <span class="value">{{ vehicleData.fprq || '2025-05-21 00:00:00' }}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">运营截止时间:</span>
                            <span class="value">{{ vehicleData.sxrq || '2026-05-21 00:00:00' }}</span>
                        </div>
                    </div>
                </div>

                <!-- 运营信息 -->
                <div class="detail-section">
                    <div class="section-title">运营信息</div>
                    <div class="info-grid">
                        <div class="info-item">
                            <span class="label">运营线路:</span>
                            <span class="value">{{ vehicleData.lineName || '11路' }}</span>
                        </div>
                    </div>
                </div>

                <!-- 运行信息 -->
                <div class="detail-section">
                    <div class="section-title">运行信息</div>
                    <div class="info-grid">
                        <div class="info-item">
                            <span class="label">在线状态:</span>
                            <span class="value status-online">在线</span>
                        </div>
                        <div class="info-item">
                            <span class="label">数据同步时间:</span>
                            <span class="value">{{ vehicleData.createTime || '--' }}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">驾驶模式:</span>
                            <span class="value">{{ getDrivingModeText(vehicleData.adasRunWorkSt) }}</span>
                        </div>


                        <div class="info-item">
                            <span class="label">当前车速:</span>
                            <span class="value">{{ vehicleData.vehSpd ? vehicleData.vehSpd + 'km/h' : '0km/h' }}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">发动机转速:</span>
                            <span class="value">{{ vehicleData.engineSpd ? vehicleData.engineSpd + 'rpm' : '0rpm' }}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">车辆方向角:</span>
                            <span class="value">{{ vehicleData.vehDirectionAng ? vehicleData.vehDirectionAng + '°' : '0°' }}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">车辆移动方向:</span>
                            <span class="value">{{ vehicleData.vehMovDir || '0' }}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">左转灯状态:</span>
                            <span class="value">{{ getLightText(vehicleData.leftTurnLampCtl) }}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">右转灯状态:</span>
                            <span class="value">{{ getLightText(vehicleData.rightTurnLampLin) }}</span>
                        </div>

                        <div class="info-item">
                            <span class="label">近光灯状态:</span>
                            <span class="value">{{ getLightText(vehicleData.dippedBeamCtl) }}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">刹车灯状态:</span>
                            <span class="value">{{ getBrakeLightText(vehicleData.brakeLampCtl) }}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">GNSS高程:</span>
                            <span class="value">{{ vehicleData.gnssHight ? vehicleData.gnssHight + 'm' : '0m' }}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">GNSS经度:</span>
                            <span class="value">{{ vehicleData.gnssLong || '0' }}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">GNSS纬度:</span>
                            <span class="value">{{ vehicleData.gnssLat || '0' }}</span>
                        </div>

                        <div class="info-item">
                            <span class="label">GNSS航向角:</span>
                            <span class="value">{{ vehicleData.gnssHead ? vehicleData.gnssHead + '°' : '0°' }}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">GNSS地面速度:</span>
                            <span class="value">{{ vehicleData.gnssSpd ? vehicleData.gnssSpd + 'km/h' : '0km/h' }}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">GNSS上传时间:</span>
                            <span class="value">{{ vehicleData.gnssTime || '--' }}</span>
                        </div>



                    </div>
                </div>

                <!-- 底部确认按钮 -->
                <div class="bottom-actions">
                    <a-button type="primary" @click="handleConfirm">确认</a-button>
                </div>
            </div>

            <!-- 右侧操作区域 -->
            <div class="action-section">
                <!-- 图片上传区域 -->
                <!-- <div class="upload-section">
                    <div class="upload-title">车辆图片</div>
                    <div class="upload-content">
                        <SQuploadFile 
                            :maxCount="1"
                            :files="vehicleData.vehicleImage || []"
                            @updateFiles="changeVehicleImage"
                            @change="changeVehicleImage"
                        >
                            <template #tip>
                                上传格式为jpg/jpeg/png且大小不超过5MB的图片
                            </template>
</SQuploadFile>
</div>
</div> -->

                <!-- 操作按钮 -->
                <div class="action-buttons">
                    <a-button type="primary" class="action-btn" @click="handleRealTimeMonitor">
                        实时监控
                    </a-button>
                    <a-button type="primary" class="action-btn" @click="handleHistoryPlayback">
                        历史回放
                    </a-button>
                </div>
            </div>
        </div>
    </a-modal>
</template>

<script setup>
import { ref, reactive, defineExpose, defineEmits } from 'vue'
import { message } from 'ant-design-vue'

const emit = defineEmits(['success', 'realTimeMonitor', 'historyPlayback'])

const visible = ref(false)
const modalData = ref({
    title: '车辆详情',
    id: ''
})

const vehicleData = reactive({
    // 基础信息
    plateLicense: '',
    plateVin: '',
    linkman: '',
    linkTel: '',
    manufacturerName: '',
    operatorName: '',
    vehicleTypeName: '',
    optStatus: '',
    fprq: '',
    sxrq: '',
    lineName: '',
    imageUrl: '',
    
    // 运行信息 - 接口字段（仅保留当前显示的字段）
    adasRunWorkSt: 0, // 0 手动驾驶，1 自动驾驶
    apsPer: 0, // 当前油门开度
    brakeLampCtl: 0, // 刹车灯控制命令 0 关 1 开 2 故障 3 预留
    createTime: '', // 数据同步时间
    dippedBeamCtl: 0, // 近光灯控制命令 0 关 1 开 2 故障 3 预留
    engineSpd: 0, // 当前发动机转速
    gnssHead: 0, // GNSS航向角
    gnssHight: 0, // GNSS高程
    gnssLat: 0, // GNSS纬度
    gnssLong: 0, // GNSS经度
    gnssSpd: 0, // GNSS地面速度
    gnssTime: '', // GNSS上传时间
    leftTurnLampCtl: 0, // 左转向灯控制命令 0 关 1 开 2 故障 3 预留
    rightTurnLampLin: 0, // 右转向灯状态 0 关 1 开 2 故障 3 预留
    vehDirectionAng: 0, // 车辆方向角
    vehMovDir: 0, // 车辆移动方向
    vehSpd: 0 // 当前车速
})

// 显示弹窗
const showModal = (data) => {
    modalData.value.title = data.title || '车辆详情'
    modalData.value.id = data.id || ''
    visible.value = true

    // 加载车辆数据
    if (data.id) {
        // 这里可以调用API获取车辆详情数据
        Object.assign(vehicleData, {
            ...data,
            // 模拟实时数据 - 使用接口字段（仅保留当前显示的字段）
            adasRunWorkSt: data.adasRunWorkSt || 1, // 1 自动驾驶
            apsPer: data.apsPer || 56, // 当前油门开度
            brakeLampCtl: data.brakeLampCtl || 0, // 刹车灯关闭
            createTime: data.createTime || new Date().toLocaleString(), // 数据同步时间
            dippedBeamCtl: data.dippedBeamCtl || 1, // 近光灯开启
            engineSpd: data.engineSpd || 2500, // 发动机转速
            gnssHead: data.gnssHead || 45.5, // GNSS航向角
            gnssHight: data.gnssHight || 120.5, // GNSS高程
            gnssLat: data.gnssLat || 39.9042, // GNSS纬度
            gnssLong: data.gnssLong || 116.4074, // GNSS经度
            gnssSpd: data.gnssSpd || 16.25, // GNSS地面速度
            gnssTime: data.gnssTime || new Date().toLocaleString(), // GNSS上传时间
            leftTurnLampCtl: data.leftTurnLampCtl || 0, // 左转向灯关闭
            rightTurnLampLin: data.rightTurnLampLin || 0, // 右转向灯关闭
            vehDirectionAng: data.vehDirectionAng || 45.2, // 车辆方向角
            vehMovDir: data.vehMovDir || 1, // 车辆移动方向
            vehSpd: data.vehSpd || 16.25 // 当前车速
        })
    }
}

// 图片上传处理
const changeVehicleImage = (files) => {
    vehicleData.vehicleImage = files
}

// 实时监控
const handleRealTimeMonitor = () => {
    message.info('实时监控功能待实现')
    emit('realTimeMonitor', vehicleData)
}

// 历史回放
const handleHistoryPlayback = () => {
    message.info('历史回放功能待实现')
    emit('historyPlayback', vehicleData)
}

// 确认
const handleConfirm = () => {
    visible.value = false
    emit('success', vehicleData)
}

// 取消
const handleCancel = () => {
    visible.value = false
}

// 辅助函数 - 获取驾驶模式文本
const getDrivingModeText = (adasRunWorkSt) => {
    switch (adasRunWorkSt) {
        case 0:
            return '手动驾驶'
        case 1:
            return '自动驾驶'
        default:
            return '未知'
    }
}

// 辅助函数 - 获取刹车灯状态文本
const getBrakeLightText = (brakeLampCtl) => {
    switch (brakeLampCtl) {
        case 0:
            return '关闭'
        case 1:
            return '开启'
        case 2:
            return '故障'
        case 3:
            return '预留'
        default:
            return '未知'
    }
}

// 辅助函数 - 获取灯光状态文本
const getLightText = (lightCtl) => {
    switch (lightCtl) {
        case 0:
            return '关闭'
        case 1:
            return '开启'
        case 2:
            return '故障'
        case 3:
            return '预留'
        default:
            return '未知'
    }
}

// 暴露方法给父组件
defineExpose({ showModal })
</script>

<style scoped lang="less">
.vehicle-detail-modal {
    :deep(.ant-modal-body) {
        padding: 24px;
    }
}

.detail-layout {
    display: flex;
    gap: 12px;
    min-height: 600px;
}

.detail-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.detail-section {
    .section-title {
        font-size: 16px;
        font-weight: 600;
        color: #333;
        margin-bottom: 16px;
        padding-bottom: 8px;
        border-bottom: 1px solid #f0f0f0;
    }

    .info-grid {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 8px 16px;

        .info-item {
            display: flex;
            align-items: center;
            min-height: 32px;

            .label {
                font-weight: 500;
                color: #666;
                min-width: 100px;
                margin-right: 8px;
            }

            .value {
                color: #333;
                flex: 1;

                &.status-online {
                    color: #52c41a;
                    font-weight: 500;
                }
            }
        }
    }
}

.bottom-actions {
    display: flex;
    justify-content: center;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #f0f0f0;
}

.action-section {
    width: 180px;
    border-left: 1px solid #f0f0f0;
    padding-left: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.upload-section {
    .upload-title {
        font-size: 16px;
        font-weight: 600;
        color: #333;
        margin-bottom: 16px;
        padding-bottom: 8px;
        border-bottom: 1px solid #f0f0f0;
    }

    .upload-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 200px;
        background: #fafafa;
        border: 2px dashed #d9d9d9;
        border-radius: 8px;
        padding: 20px;
        text-align: center;

        &:hover {
            border-color: #1890ff;
        }
    }
}

.action-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;

    .action-btn {
        height: 40px;
        font-size: 14px;
        font-weight: 500;
    }
}

// 响应式设计
@media (max-width: 1200px) {
    .detail-layout {
        flex-direction: column;

        .action-section {
            width: 100%;
            border-left: none;
            border-top: 1px solid #f0f0f0;
            padding-left: 0;
            padding-top: 24px;
        }
    }

    .detail-section .info-grid {
        grid-template-columns: 1fr;
    }
}
</style>